<template>
  <view class="record-popup" v-if="show" @touchmove.stop.prevent>
    <view class="popup-mask" @tap="closeModal"></view>
    <view class="popup-content-wrapper">
      <view class="popup-header">
        <text class="title">{{ isEditing ? '编辑记录' : (isBatch ? '批量添加' : '添加记录') }}</text>
        <text class="close" @tap="closeModal">×</text>
      </view>
      <view class="popup-content">
        <template v-if="isBatch">
          <!-- 批量添加页面 - 先统一选择类型 -->
          <view class="form-item">
            <text class="label">记录类型</text>
            <view class="radio-group">
              <view 
                class="radio-item" 
                :class="{'radio-item-active': batchType === 'receive'}"
                @tap="setBatchType('receive')"
              >
                <text class="radio-icon">{{ batchType === 'receive' ? '●' : '○' }}</text>
                <text class="radio-label">收礼</text>
              </view>
              <view 
                class="radio-item" 
                :class="{'radio-item-active': batchType === 'give'}"
                @tap="setBatchType('give')"
              >
                <text class="radio-icon">{{ batchType === 'give' ? '●' : '○' }}</text>
                <text class="radio-label">送礼</text>
              </view>
            </view>
          </view>

          <view class="batch-records">
            <view 
              v-for="(record, index) in batchRecords" 
              :key="index"
              class="batch-record-item"
            >
              <view class="batch-record-row">
                <view class="batch-record-index">#{{ index + 1 }}</view>
                <view class="batch-record-inputs">
                  <view class="contact-search">
                    <input 
                      class="input-contact" 
                      v-model="record.contactSearch" 
                      placeholder="联系人"
                      @input="() => handleBatchContactSearch(index)"
                      @focus="() => showBatchContactDropdown(index)"
                      :class="{'input-error': batchErrors[index]?.contact}"
                    />
                    <view class="error-tip" v-if="batchErrors[index]?.contact">
                      {{ batchErrors[index].contact }}
                    </view>
                    <view class="dropdown" v-if="record.isDropdownVisible && record.filteredContacts && record.filteredContacts.length > 0">
                      <view 
                        v-for="contact in record.filteredContacts" 
                        :key="contact.id"
                        class="dropdown-item"
                        @tap="() => selectBatchContact(index, contact)"
                      >
                        {{ contact.name }}
                      </view>
                    </view>
                  </view>
                  <view class="amount-wrapper">
                    <input 
                      class="input-amount" 
                      v-model="record.amount"
                      type="digit"
                      placeholder="金额"
                      @input="() => handleBatchAmountInput(index)"
                      :class="{'input-error': batchErrors[index]?.amount}"
                    />
                    <view class="error-tip" v-if="batchErrors[index]?.amount">
                      {{ batchErrors[index].amount }}
                    </view>
                  </view>
                </view>
                <text 
                  v-if="batchRecords.length > 1" 
                  class="delete-icon" 
                  @tap="removeBatchRecord(index)"
                >×</text>
              </view>
            </view>
          </view>
          
          <view class="batch-actions">
            <view 
              class="add-more-btn" 
              @tap="addBatchRecord"
            >添加更多记录</view>
          </view>
        </template>
        
        <template v-else>
          <!-- 单笔添加表单 -->
          <view class="form-item">
            <text class="label">联系人</text>
            <view class="contact-search">
              <input 
                class="input" 
                v-model="contactSearch" 
                placeholder="输入姓名搜索或添加新联系人"
                @input="handleContactSearch"
                @focus="isContactDropdownVisible = true"
                :class="{'input-error': errors.contact}"
              />
              <view class="error-tip" v-if="errors.contact">{{ errors.contact }}</view>
              <view class="dropdown" v-if="isContactDropdownVisible && filteredContacts.length > 0">
                <view 
                  v-for="contact in filteredContacts" 
                  :key="contact.id"
                  class="dropdown-item"
                  @tap="selectContact(contact)"
                >
                  {{ contact.name }}
                </view>
              </view>
            </view>
          </view>

          <view class="form-item">
            <text class="label">类型</text>
            <view class="radio-group">
              <view 
                class="radio-item" 
                :class="{'radio-item-active': formData.type === 'receive'}"
                @tap="formData.type = 'receive'"
              >
                <text class="radio-icon">{{ formData.type === 'receive' ? '●' : '○' }}</text>
                <text class="radio-label">收礼</text>
              </view>
              <view 
                class="radio-item" 
                :class="{'radio-item-active': formData.type === 'give'}"
                @tap="formData.type = 'give'"
              >
                <text class="radio-icon">{{ formData.type === 'give' ? '●' : '○' }}</text>
                <text class="radio-label">送礼</text>
              </view>
            </view>
          </view>

          <view class="form-item">
            <text class="label">金额</text>
            <input 
              class="input" 
              type="digit"
              v-model="formData.amount"
              placeholder="请输入金额"
              @input="handleAmountInput"
              :class="{'input-error': errors.amount}"
            />
            <view class="error-tip" v-if="errors.amount">{{ errors.amount }}</view>
          </view>
          
          <view class="form-item">
            <text class="label">礼品</text>
            <input 
              class="input" 
              v-model="formData.giftName"
              placeholder="请输入礼品名称（选填）"
              @input="handleGiftNameInput"
              :class="{'input-error': errors.giftName}"
            />
            <view class="error-tip" v-if="errors.giftName">{{ errors.giftName }}</view>
          </view>

          <view class="form-item">
            <text class="label">备注</text>
            <textarea 
              class="textarea" 
              v-model="formData.remark"
              placeholder="请输入备注（选填）"
              @input="handleRemarkInput"
              :class="{'textarea-error': errors.remark}"
            />
            <view class="error-tip" v-if="errors.remark">{{ errors.remark }}</view>
          </view>
        </template>
      </view>
      <view class="popup-footer">
        <button 
          class="submit-btn" 
          @tap="handleSubmit"
          :disabled="!isValid"
        >
          {{ isEditing ? '更新' : '确定' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { useContactStore } from '../../../store/modules/contact';
import type { Contact } from '../../../types/giftbook';

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  isBatch: {
    type: Boolean,
    default: false
  },
  isEditing: {
    type: Boolean,
    default: false
  },
  initialFormData: {
    type: Object,
    default: () => ({
      id: '',
      contactId: '',
      type: 'receive',
      amount: '',
      giftName: '',
      remark: ''
    })
  },
  giftBookId: {
    type: String,
    required: true
  }
});

const emit = defineEmits(['close', 'submit']);

const contactStore = useContactStore();

// 获取联系人列表
const contacts = computed(() => {
  return contactStore.getAllContacts;
});

// 批量记录数据
const batchRecords = ref<any[]>([]);
// 批量记录统一类型
const batchType = ref('receive');

// 设置批量记录类型
const setBatchType = (type: string) => {
  batchType.value = type;
  // 将所有批量记录类型设置为相同值
  batchRecords.value.forEach((record: any) => {
    record.type = type;
  });
};

// 联系人搜索相关
const contactSearch = ref('');
const isContactDropdownVisible = ref(false);
const filteredContacts = ref<Contact[]>([]);

// 表单数据
const formData = ref({
  id: '',
  contactId: '',
  contactName: '',
  type: 'receive',
  amount: '',
  giftName: '',
  remark: '',
  createTime: '',
});

// 添加错误状态管理
const errors = ref({
  contact: '',
  amount: '',
  giftName: '',
  remark: ''
});

// 批量错误状态管理
const batchErrors = ref<Record<number, { contact?: string; amount?: string }>>({});

// 初始化数据
const initData = () => {
  if (props.isEditing && props.initialFormData) {
    // 确保复制所有字段，包括createTime
    formData.value = { 
      ...props.initialFormData,
      createTime: props.initialFormData.createTime || ''
    };
    // 设置联系人搜索字段，优先使用传递的contactName
    contactSearch.value = formData.value.contactName || '';
    if (!contactSearch.value && formData.value.contactId) {
      const contact = contacts.value.find((c: Contact) => c.id === formData.value.contactId);
      if (contact) {
        contactSearch.value = contact.name;
      }
    }
  } else if (props.isBatch) {
    batchType.value = 'receive';
    batchRecords.value = [{
      contactId: '',
      contactSearch: '',
      contactName: '',
      type: 'receive',
      amount: '',
      giftName: '',
      remark: '',
      isDropdownVisible: false,
      filteredContacts: []
    }];
  } else {
    resetForm();
    contactSearch.value = '';
    filteredContacts.value = [];
  }
};

// 使用onMounted确保组件挂载时初始化数据
onMounted(() => {
  // 初始化数据
  initData();
  console.log('组件挂载完成，初始化数据');
});

// 监听show属性变化
watch(() => props.show, (newVal: boolean) => {
  if (newVal) {
    initData();
    console.log('弹窗显示，初始化数据');
  }
});

// 监听批量类型变化
watch(() => batchType.value, (newVal: string) => {
  batchRecords.value.forEach((record: any) => {
    record.type = newVal;
  });
});

// 监听initialFormData属性变化
watch(() => props.initialFormData, (newVal: Record<string, any>) => {
  if (props.show && props.isEditing && newVal) {
    formData.value = { 
      ...newVal,
      createTime: newVal.createTime || formData.value.createTime || '' 
    };
    // 设置联系人搜索字段
    const contact = contacts.value.find((c: Contact) => c.id === formData.value.contactId);
    if (contact) {
      contactSearch.value = contact.name;
    }
    console.log('编辑数据更新:', formData.value);
  }
}, { deep: true });

// 表单验证
const isValid = computed(() => {
  if (props.isBatch) {
    return batchRecords.value.every((record: any) => {
      const hasContact = record.contactSearch || record.contactId;
      const hasAmountValid = !record.amount || /^\d+(\.\d{0,2})?$/.test(record.amount);
      const hasAmount = !!record.amount && hasAmountValid;
      return hasContact && hasAmount;
    }) && batchType.value !== '';
  } else {
    const hasContact = contactSearch.value || formData.value.contactId;
    const hasAmountValid = !formData.value.amount || /^\d+(\.\d{0,2})?$/.test(formData.value.amount);
    const hasAmount = !!formData.value.amount && hasAmountValid;
    return hasContact && formData.value.type && hasAmount;
  }
});

// 重置表单
const resetForm = () => {
  formData.value = {
    id: '',
    contactId: '',
    contactName: '',
    type: 'receive',
    amount: '',
    giftName: '',
    remark: '',
    createTime: '',
  };
};

// 关闭弹窗
const closeModal = () => {
  emit('close');
};

// 添加一条批量记录
const addBatchRecord = () => {
  batchRecords.value.push({
    contactId: '',
    contactSearch: '',
    contactName: '',
    type: batchType.value,
    amount: '',
    giftName: '',
    remark: '',
    isDropdownVisible: false,
    filteredContacts: []
  });
};

// 删除一条批量记录
const removeBatchRecord = (index: number) => {
  batchRecords.value.splice(index, 1);
};

// 清除错误信息
const clearErrors = () => {
  errors.value = {
    contact: '',
    amount: '',
    giftName: '',
    remark: ''
  };
};

// 联系人输入验证
const validateContact = () => {
  if (!contactSearch.value && !formData.value.contactId) {
    errors.value.contact = '请选择或输入联系人';
    return false;
  }
  if (contactSearch.value.length > 20) {
    errors.value.contact = '联系人名称不能超过20个字符';
    return false;
  }
  errors.value.contact = '';
  return true;
};

// 金额输入验证
const validateAmount = () => {
  if (!formData.value.amount) {
    errors.value.amount = '请输入金额';
    return false;
  }
  if (!/^\d+(\.\d{0,2})?$/.test(formData.value.amount)) {
    errors.value.amount = '金额格式不正确';
    return false;
  }
  errors.value.amount = '';
  return true;
};

// 礼品名称输入验证
const validateGiftName = () => {
  if (formData.value.giftName && formData.value.giftName.length > 50) {
    errors.value.giftName = '礼品名称不能超过50个字符';
    return false;
  }
  errors.value.giftName = '';
  return true;
};

// 备注输入验证
const validateRemark = () => {
  if (formData.value.remark && formData.value.remark.length > 200) {
    errors.value.remark = '备注不能超过200个字符';
    return false;
  }
  errors.value.remark = '';
  return true;
};

// 修改handleContactSearch方法
const handleContactSearch = () => {
  // 当用户修改联系人名称时，清空之前选择的联系人ID
  if (contactSearch.value !== getContactName(formData.value.contactId)) {
    formData.value.contactId = '';
    // 用户手动输入新名称时，使用输入的值作为contactName
    formData.value.contactName = contactSearch.value;
  }
  
  validateContact();
  
  if (!contactSearch.value.trim()) {
    filteredContacts.value = [];
    return;
  }
  
  // 根据输入进行模糊搜索
  const keyword = contactSearch.value.toLowerCase();
  filteredContacts.value = contacts.value.filter((contact: Contact) => 
    contact.name.toLowerCase().includes(keyword)
  ).slice(0, 5); // 限制最多显示5个结果
};

// 选择联系人
const selectContact = (contact: Contact) => {
  contactSearch.value = contact.name;
  formData.value.contactId = contact.id;
  formData.value.contactName = contact.name;
  isContactDropdownVisible.value = false;
};

// 获取联系人姓名
const getContactName = (contactId: string) => {
  if (!contactId) return '';
  const contact = contacts.value.find((c: Contact) => c.id === contactId);
  return contact?.name || '';
};

// 点击其他区域关闭下拉框
const closeAllDropdowns = () => {
  isContactDropdownVisible.value = false;
  batchRecords.value.forEach((record: any) => {
    record.isDropdownVisible = false;
  });
};

// 批量联系人输入验证
const validateBatchContact = (index: number) => {
  const record = batchRecords.value[index];
  if (!record.contactSearch && !record.contactId) {
    batchErrors.value[index] = {
      ...batchErrors.value[index],
      contact: '请选择或输入联系人'
    };
    return false;
  }
  if (record.contactSearch.length > 20) {
    batchErrors.value[index] = {
      ...batchErrors.value[index],
      contact: '联系人名称不能超过20个字符'
    };
    return false;
  }
  batchErrors.value[index] = {
    ...batchErrors.value[index],
    contact: ''
  };
  return true;
};

// 批量金额输入验证
const validateBatchAmount = (index: number) => {
  const record = batchRecords.value[index];
  if (!record.amount) {
    batchErrors.value[index] = {
      ...batchErrors.value[index],
      amount: '请输入金额'
    };
    return false;
  }
  if (!/^\d+(\.\d{0,2})?$/.test(record.amount)) {
    batchErrors.value[index] = {
      ...batchErrors.value[index],
      amount: '金额格式不正确'
    };
    return false;
  }
  batchErrors.value[index] = {
    ...batchErrors.value[index],
    amount: ''
  };
  return true;
};

// 处理批量联系人搜索
const handleBatchContactSearch = (index: number) => {
  const record = batchRecords.value[index];
  
  // 当用户修改联系人名称时，清空之前选择的联系人ID
  if (record.contactSearch !== getContactName(record.contactId)) {
    record.contactId = '';
    // 用户手动输入新名称时，使用输入的值作为contactName
    record.contactName = record.contactSearch;
  }
  
  validateBatchContact(index);
  
  if (!record.contactSearch || !record.contactSearch.trim()) {
    record.filteredContacts = [];
    return;
  }
  
  // 根据输入进行模糊搜索
  const keyword = record.contactSearch.toLowerCase();
  record.filteredContacts = contacts.value.filter((contact: Contact) => 
    contact.name.toLowerCase().includes(keyword)
  ).slice(0, 5); // 限制最多显示5个结果
};

// 显示批量联系人下拉框
const showBatchContactDropdown = (index: number) => {
  // 首先关闭所有下拉框
  closeAllDropdowns();
  
  // 然后显示选定的下拉框
  const record = batchRecords.value[index];
  record.isDropdownVisible = true;
};

// 选择批量联系人
const selectBatchContact = (index: number, contact: Contact) => {
  const record = batchRecords.value[index];
  record.contactId = contact.id;
  record.contactName = contact.name;
  record.contactSearch = contact.name;
  record.isDropdownVisible = false;
};

// 修改表单验证规则
const validateForm = () => {
  clearErrors();
  const isContactValid = validateContact();
  const isAmountValid = validateAmount();
  const isGiftNameValid = validateGiftName();
  const isRemarkValid = validateRemark();
  
  return isContactValid && isAmountValid && isGiftNameValid && isRemarkValid;
};

// 修改handleSubmit方法
const handleSubmit = () => {
  if (props.isBatch) {
    // 批量提交的验证
    let isValid = true;
    batchRecords.value.forEach((record: any, index: number) => {
      const isContactValid = validateBatchContact(index);
      const isAmountValid = validateBatchAmount(index);
      if (!isContactValid || !isAmountValid) {
        isValid = false;
      }
    });
    
    if (!isValid) {
      return;
    }
    
    // 批量提交
    emit('submit', { 
      isBatch: true, 
      records: batchRecords.value.map((record: any) => {
        // 处理联系人，优先使用contactName或contactSearch
        let finalContactName = record.contactName || record.contactSearch || '';
        // 如果有联系人ID，确保使用正确的名称
        if (record.contactId) {
          const actualName = getContactName(record.contactId);
          if (actualName) finalContactName = actualName;
        }
        
        // 获取当前时间戳
        const now = new Date().getTime();
        
        return {
          contactId: record.contactId,
          contactName: finalContactName,
          type: batchType.value,
          amount: Number(record.amount) || 0,
          giftName: record.giftName || '',
          remarks: record.remark || '',
          // 确保每条记录都有createTime和updateTime
          createTime: now,
          updateTime: now
        };
      })
    });
  } else {
    // 单条记录提交
    // 处理联系人名称，优先使用已有字段，其次使用输入框内容
    let finalContactName = formData.value.contactName || contactSearch.value || '';
    // 如果有联系人ID，确保使用正确的名称
    if (formData.value.contactId) {
      const actualName = getContactName(formData.value.contactId);
      if (actualName) finalContactName = actualName;
    }
    
    // 获取当前时间戳
    const now = new Date().getTime();
    
    emit('submit', { 
      isBatch: false,
      id: formData.value.id,
      contactId: formData.value.contactId,
      contactName: finalContactName,
      type: formData.value.type,
      amount: Number(formData.value.amount) || 0,
      giftName: formData.value.giftName || '',
      remarks: formData.value.remark || '',
      // 如果是编辑且原数据有createTime就保留，否则使用当前时间
      createTime: (props.isEditing && formData.value.createTime) ? formData.value.createTime : now,
      updateTime: now
    });
  }
};

// 修改handleGiftNameInput方法
const handleGiftNameInput = () => {
  validateGiftName();
  if (formData.value.giftName.length > 50) {
    formData.value.giftName = formData.value.giftName.slice(0, 50);
  }
};

// 修改handleRemarkInput方法
const handleRemarkInput = () => {
  validateRemark();
  if (formData.value.remark.length > 200) {
    formData.value.remark = formData.value.remark.slice(0, 200);
  }
};

// 添加金额输入处理
const handleAmountInput = () => {
  validateAmount();
};

// 添加金额输入处理
const handleBatchAmountInput = (index: number) => {
  validateBatchAmount(index);
};
</script>

<style lang="scss">
.batch-record-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32rpx;
  width: 100%;
  
  .batch-record-index {
    width: 60rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #666;
    text-align: center;
    padding-top: 16rpx;
  }
  
  .batch-record-inputs {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
    
    .contact-search {
      flex: 3;
      position: relative;
      min-width: 200rpx;
      margin-bottom: 8rpx;

      .error-tip {
        position: absolute;
        left: 0;
        bottom: -36rpx;
        font-size: 22rpx;
        color: #ff4d4f;
        line-height: 1.2;
        white-space: nowrap;
        z-index: 1;
      }
    }
    
    .input-contact, .input-amount {
      width: 100%;
      height: 70rpx;
      line-height: 70rpx;
      padding: 0 16rpx;
      font-size: 26rpx;
      color: #333;
      background-color: #f8f8f8;
      border-radius: 8rpx;
      box-sizing: border-box;
      
      &.input-error {
        border: 1px solid #ff4d4f;
        background-color: #fff2f0;
      }
    }

    .amount-wrapper {
      flex: 2;
      position: relative;
      min-width: 140rpx;
      margin-bottom: 8rpx;

      .error-tip {
        position: absolute;
        left: 0;
        bottom: -36rpx;
        font-size: 22rpx;
        color: #ff4d4f;
        line-height: 1.2;
        white-space: nowrap;
        z-index: 1;
      }
    }
  }
  
  .delete-icon {
    width: 60rpx;
    font-size: 32rpx;
    color: #ff4d4f;
    text-align: center;
    padding-top: 16rpx;
  }
}

.record-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .popup-content-wrapper {
    position: relative;
    width: 90%;
    max-height: 90%;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.3s ease;

    @keyframes slideIn {
      from {
        transform: translateY(50rpx);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .close {
      font-size: 48rpx;
      color: #999;
      line-height: 1;
    }
  }

  .popup-content {
    padding: 24rpx;
    overflow-y: auto;
    max-height: 70vh;

    .form-item {
      margin-bottom: 24rpx;

      .label {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 12rpx;
      }

      .input, .textarea {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
        color: #333;
        background-color: #f8f8f8;
        border-radius: 8rpx;
        box-sizing: border-box;
      }

      .textarea {
        height: 160rpx;
        line-height: 1.5;
        padding: 16rpx 24rpx;
      }
    }

    .batch-records {
      .batch-record-item {
        margin-bottom: 16rpx;
        padding: 16rpx;
        background-color: #f8f8f8;
        border-radius: 12rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .batch-actions {
      margin-top: 24rpx;
      padding-top: 24rpx;
      border-top: 1rpx solid #eee;

      .add-more-btn {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 28rpx;
        color: var(--primary-color);
        background-color: rgba(var(--button-color-rgb), 0.1);
        border-radius: 8rpx;
      }
    }
  }

  .popup-footer {
    margin-top: 32rpx;
    padding: 16rpx 24rpx 32rpx;
    border-top: 1px solid #f5f5f5;

    .submit-btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 32rpx;
      color: #fff;
      background-color: var(--primary-color);
      border-radius: 44rpx;

      &:disabled {
        opacity: 0.6;
      }
    }
  }
}

.contact-search {
  position: relative;
  
  .input {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: #333;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    box-sizing: border-box;
  }
  
  .dropdown {
    position: absolute;
    top: 74rpx;
    left: 0;
    right: 0;
    background-color: #fff;
    border-radius: 8rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
    z-index: 10;
    max-height: 300rpx;
    overflow-y: auto;
    
    .dropdown-item {
      padding: 16rpx 24rpx;
      font-size: 28rpx;
      color: #333;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      &:active {
        background-color: #f5f5f5;
      }
    }
  }
}

.radio-group {
  display: flex;
  gap: 20rpx;
  
  .radio-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16rpx 24rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    transition: all 0.2s ease;
    border: 1rpx solid #eee;
    
    &:active {
      transform: scale(0.98);
    }
    
    &-active {
      &.radio-item[class*="radio-item"] {
        border-color: var(--primary-color);
      }
      
      &:nth-child(1) {
        background-color: rgba(var(--button-color-rgb), 0.1);
        
        .radio-icon, .radio-label {
          color: var(--primary-color);
        }
      }
      
      &:nth-child(2) {
        background-color: rgba(255, 82, 82, 0.1);
        
        .radio-icon, .radio-label {
          color: #ff5252;
        }
      }
    }
    
    .radio-icon {
      font-size: 32rpx;
      color: #999;
      margin-right: 8rpx;
    }
    
    .radio-label {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.input-error, .textarea-error {
  border: 1px solid #ff4d4f !important;
  background-color: #fff2f0 !important;
}

.error-tip {
  font-size: 24rpx;
  color: #ff4d4f;
  margin-top: 8rpx;
  line-height: 1.2;
}
</style> 